生命週期

React的生命週期共分成三大塊，創建、更新、銷毀

class component自帶生命週期，functional component則需要hook來處理生命週期及狀態

掛載階段

執行順序是這樣 contructor => render => componentDidMount

• contructor 為最先被呼叫的方法，可以在此做一些初始值的處理
• componentDidMount在element被添加到DOM上時觸發，這時候操作DOM才會有內容，在這裡可以使用Ajax請求或事件監聽

• setState()為異步程序，盡量避免在此之後做state值的運算，可以在第二個參數包成函式傳入

     this.setState(
          {
            time: new Date().toLocaleTimeString(),
          },
          () => {
            document.title = this.state.time
          }
        )
  

• • setState()需要在DOM渲染完畢後才取值

更新階段

觸發更新的方法有三種

• props改變
• setState()
• forceUpdate()

接下來會在觸發render進入componentDidUpdate

不要在這個階段做setState()，會造成無限迴圈!!!

卸載階段

觸發componentWillUnmount，可以在這個階段做subscription的解除避免效能浪費

引用

react-lifecycle-methods-diagram